<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
  <script src="myjs/base.js"></script>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/movie.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="height: 84px;padding-top: 10px;">
      <myhead img-url="image/YYDS.png" title="YYDS影院" :user-msg="userMsg" ></myhead>
    </el-header>

    <el-container>
      <el-main>
<!--        src="项目素材/afanda.mp4"-->
        <div class="main-left">
          <div id="dmBox" style="position:  absolute;z-index: 110;width: 63%;height: 40%;margin-top: 20px;left: 10%;" >
            <marquee v-if="isPlay"  class="marquee" v-for="dm in dmMsg.data" >
              <div v-show="dmopen">
                <el-avatar  style="position: relative;top: 5px" :src="dm.image"></el-avatar>:<span  style="line-height: 47px;text-align: center">{{dm.content}}</span>
              </div>
            </marquee>
          </div>
          <div  style="height: 600px;background-color: black;z-index: 100">
            <video ref="movie" autoplay="autoplay" class="video"  controls="controls"  poster="项目素材/科幻/阿凡达.webp" src="项目素材/afanda.mp4">浏览器不支持MP4</video>
          </div>
          <div style="border: 1px solid #eeeeee">
            <span class="dmnums">已有{{dmMsg.num}}条弹幕</span>
            <el-switch v-model="dmswitch" inactive-text="弹幕开关" @change="dmChange" ></el-switch>
            <el-input class="dminput" v-model="dminput" placeholder="请输入弹幕"></el-input>
            <el-button type="primary" @click="dmSave" round>发送弹幕</el-button>
          </div>

          <div class="sc-show">
            <el-button class="shoucang" type="warning" icon="el-icon-star-off" circle></el-button><span>123人已收藏</span>
            <span style="margin-left: 100px;font-size: 12px">给电影打打分吧！</span><el-rate class="grades" v-model="grade" show-text ></el-rate>


          </div>
          <el-divider></el-divider>
          <div style="margin-top: 50px">
            <h1>评论</h1>
            <el-avatar style="position: relative;top:15px;margin-left: 30px" :src="userMsg.image"></el-avatar><el-input class="comment" v-model="comment" placeholder="请输入评论"></el-input><el-button type="primary" @click.prevent="save">发布</el-button>
            <el-empty  v-if="commentUserMsg.length===0" :image-size="100" description="赶快发表评论吧！"></el-empty>
            <div v-for="item in commentUserMsg" :key="item.userid">
              <el-avatar :size="50"  style="position: relative;top:20px;margin-left: 30px;right: 10px" :src="item.image"></el-avatar><span>{{item.username}}</span>
              <p style="position: relative;left: 75px;margin-top: 10px">{{item.content}}
                <el-popconfirm confirm-button-type="text" v-if="userMsg.userid===item.userid" @Confirm="delComment(item.id)"   title="删除后这条评论以及所有回复都将删除,确定删除？">
                  <el-button  style="padding: 0;margin-left: 50px; border: none;font-size: 10px"  slot="reference">删除</el-button>
                </el-popconfirm>
              </p>

              <span style="font-size: 12px;color: #99a9bf;margin-left:75px ">{{item.time}}</span><el-button type="text" style="font-size: 13px;margin-left: 30px;" @click="openReply(item.userid,item.id,item.id)">回复</el-button>

                <!--回复列表 -->
                <div style="font-size: 14px;"v-for="name in item.chirdren" v-if="item.chirdren!=null" :key="name.userid">
                  <el-avatar :size="24" style="position: relative;top:5px;margin-left: 60px;margin-top: 10px" :src="name.image"></el-avatar>
                  <span style="margin: 0 5px">{{name.username}}</span>回复<span style="margin: 0 5px;color: #66b1ff;font-size: 15px">@{{name.pname}}</span>:<span style="margin-left: 10px;font-size: 15px">{{name.content}}</span>
                  <el-popconfirm confirm-button-type="text"  v-if="userMsg.userid===name.userid" @Confirm="delComment(name.id)"  title="删除后这条评论以及所有回复都将删除,确定删除？">
                    <el-button style="padding: 0;margin-left: 50px; border: none;font-size: 10px"  slot="reference">删除</el-button>
                  </el-popconfirm>
                  <br>
                  <span style="font-size: 12px;color: #99a9bf;margin-left:90px ">{{name.time}}</span><el-button type="text" style="font-size: 13px;margin-left: 30px;" @click="openReply(name.userid,item.id,name.id)">回复</el-button>
                </div>
              <div v-if="openid===item.id && rlyinput" :key="item.userid" ><el-input class="reply-comment" :placeholder="rlyTo.username" v-model="rlyTo.content"></el-input><el-button type="primary" @click="reply(rlyTo.userid,item.id)" >发布</el-button></div>
              <el-divider></el-divider>
            </div>
          </div>

          <div style="margin-top: 20px;"></div>
        </div>
        <div class="main-right">
          <div class="right-radio">
            <el-radio-group v-model="mainright">
            <el-radio-button label="弹幕列表"></el-radio-button>
            <el-radio-button label="简介" ></el-radio-button>
          </el-radio-group>
          </div>
          <div style="background-color: #ecf5ff;display: inline-block;width: 100%;margin-left: 5px;height: 500px;">
            <div v-if="mainright==='弹幕列表'" >
              <ul class="infinite-list" v-infinite-scroll="dmMsg" style="overflow:auto">
                <li v-for="item in dmMsg.data" class="infinite-list-item" style="font-size: 12px;color: #72767b">
                  <span style="margin-right: 10px">{{ item.username }}  :</span>{{item.content}}<span style="position: absolute;right: 210px;font-size: 10px;">{{item.time}}</span>
                </li>
              </ul>
            </div>
            <div v-if="mainright==='简介'" >
                  <h1>{{descMsg.moviename}}</h1>
                  <p>类型：{{descMsg.type}}</p>
              <p>地区：{{descMsg.area}}</p>
              <p>剧情简介：<span style="font-size: 14px">{{descMsg.moviedesc}}</span></p>
            </div>
          </div>
          <div style="border: 1px solid wheat;margin-left: 5px;height: 500px;margin-top: 10px" >
            广告位招租
          </div>
        </div>
      </el-main>
      <el-footer style="padding: 0px;">
        <!-- footer -->
        <footer class="footer" style="min-width: 1380px;">
          <div class="footer-inner">
            <h3 class="homeico footer-inner-logo"></h3>
            <p class="footer-inner-links">
              <a href="https://www.1905.com/about/aboutus/" target="_blank">关于我们</a><span>|</span>
              <a href="https://www.1905.com/sitemap.html" target="_blank">网站地图</a><span>|</span>
              <a href="https://www.1905.com/jobs/" target="_blank">诚聘英才</a><span>|</span>
              <a href="https://www.1905.com/about/copyright/" target="_blank">版权声明</a><span>|</span>
              <a href="https://www.1905.com/about/contactus/" target="_blank">联系我们</a><span>|</span>
              <a href="https://www.1905.com/error_report/error_report-p-pid-125-cid-126-tid-128.html" target="_blank">帮助与反馈</a><span>|</span>
              <a href="https://www.1905.com/link/" target="_blank">友情链接</a><span>|</span>
              <a href="https://www.1905.com/cctv6/advertise/" target="_blank">CCTV6广告招商</a><!--<span>|</span>
                <a href="javascript:void(0)">合作媒体</a>-->
            </p>
            <div class="footer-inner-bottom">
              <a href="https://www.1905.com/about/licence/" target="_blank" >网络视听许可证0107199号</a>
              <a href="https://www.1905.com/about/cbwjyxkz/" target="_blank" >出版物经营许可证</a>
              <a href="https://www.1905.com/about/jyxyc/" target="_blank" >经营性演出许可证</a>
              <a href="https://www.1905.com/about/gbdsjm/" target="_blank" >广播电视节目制作经营许可证</a>
              <br>
              <a href="https://www.1905.com/about/beian/" target="_blank">企业法人营业执照</a>
              <a href="https://www.1905.com/about/zzdxyw/" target="_blank">增值电信业务经营许可证</a>
              <a href="https://beian.miit.gov.cn" target="_blank">京ICP备12022675号</a>
              <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010202000300" target="_blank">京公网安备 11010202000300号</a>
              <br>
              <ul class="links-ul">
                <li v-for="name in linksdata.data" style="float: left;display:inline-block; margin-right:23px;">
                  <a :href="name.linkurl">
                    {{name.linkname}}
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </footer>
        <!-- 版权 -->
        <div class="copy-right" style="min-width: 1380px;width: 100%">
          <div class="copy-right-conts clearfix">
            <div class="right-conts-left fl">
              <span>CopyRight © 2022</span>
              <em>电影频道节目中心官方网站</em><em class="conts-left-margin">|</em>
              <em>
                <a href="https://www.1905.com/about/icp/" target="_blank">京ICP证100935</a>
              </em>
            </div>
          </div>
        </div>
        <!--返回顶部-->
        <!--                    <div style="width: 100%;height: 100%;">-->

        <!--                        <el-backtop :bottom="60"></el-backtop>-->

        <!--                        </div>-->
        <div>
          <template>
            <el-backtop  :bottom="100">
              <div
                      style="{
                                                height: 100%;
                                                width: 100%;
                                                background-color: #f2f5f6;
                                                box-shadow: 0 0 6px rgba(0,0,0, .12);
                                                text-align: center;
                                                line-height: 40px;
                                                color: #1989fa;
                                              }"
              >
                UP
              </div>
            </el-backtop>
          </template>
        </div>
      </el-footer>

    </el-container>
  </el-container>

</div>
<script>

  var v =new Vue({
    el:"#app",
    data: {
      linksdata:{},
      userMsg: {userid:""},
      dmswitch: true,
      dminput: "",
      grade: "",
      comment: "",
      mainright:"弹幕列表",
      commentUserMsg:[],
      watchinghMovie:{},
      saveComment:{},
      replyContent:"",
      rlyTo:{},
      rlyinput:true,
      openid:"",
      dmMsg:[],
      dmopen:true,
      //控制开关图标
      isPlay:false,
      marquee:document.getElementsByClassName("marquee"),
      descMsg:{},
    },
    created(){
      this.queryDanmu();
      this.getUserMsg();
      this.queryOneComments();
      this.queryMovieDesc();
    },
    mounted(){
      this.addlistener();
    },
    methods:{
      queryMovieDesc(){
        axios.get("MovieDescServlet.s",{
          params:{
            movieid:"1001", //this.watchingMovie.movieid
          }
        }).then(res=>{
          this.descMsg=res.data.data;
        });
      },
      addlistener(){
        this.$refs.movie.addEventListener('play',()=>{
          this.isPlay=true;
          for (let i = 0; i < this.marquee.length; i++) {
            this.marquee[i].start();
          }
        });
        this.$refs.movie.addEventListener('pause',()=>{
          this.isPlay=true;
          for (let i = 0; i < this.marquee.length; i++) {
            this.marquee[i].stop();
          }
        });
      },
      queryOneComments(){
        axios.get("QueryOneCommentServlet.s",{
          params:{
            movieid:"1001", //this.watchingMovie.movieid
          }
        }).then(res=>{
          this.commentUserMsg=res.data.data;
        });
        this.$forceUpdate();
      },
      //保存弹幕
      dmSave(){
        axios.get("UserDanmuSaveServlet.s",{
          params:{
           userid:this.userMsg.userid,
           movieid:'1001',
            content:this.dminput
          }
        }).then(res=>{
          if (res.data.code===1){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.queryDanmu();
          }else {
            this.$message.error(res.data.msg);
          }

        });
      },
      queryDanmu(){
        axios.get("DanmuQueryServlet.s",{
          params:{
            movieid:"1001", //this.watchingMovie.movieid
          }
        }).then(res=>{
          this.dmMsg=res.data.data;
        });
        this.$forceUpdate();
      },
      dmChange(id){
        this.dmopen=id;
        console.log(this.dmopen)
      },
      //评论删除功能
      delComment(id){
        axios.get("DeleteCommentServlet.s",{
          params: {
            commentid:id,
          }
        }).then(res=>{
          if (res.data.code===1){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }else {
            this.$message.error(res.data.msg);
          }
          this.queryOneComments();
        });

      },
      //评论保存功能
      save(){
        axios.get("CommentSaveServlet.s",{
          params: {
            userid:this.userMsg.userid,//this.userMsg.userid,
            movieid:"1001",
            content:this.comment,
          }
        }).then(res=>{
          if (res.data.code===1){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.comment="";
          }else {
            this.$message.error(res.data.msg);
          }
          this.queryOneComments();
        });

      },
      //回复功能
      reply(pid,dingjiid){
        axios.get("ReplyCommentServlet.s",{
          params:{
            userid:this.userMsg.userid,
            movieid:"1001",
            content:this.rlyTo.content,
            dingjiid:dingjiid,
            pid:pid,
          }
        }).then(res=>{
          if (res.data.code===1){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.rlyTo.content="";
          }else {
            this.$message.error(res.data.msg);
          }
          this.queryOneComments();
        });

      },
      getUserMsg(){
        axios.get("GetUserMessageServlet.s").then(res=>{
          if (res.data.data!=null){
            this.userMsg=res.data.data;
          }
        });
      },
      openReply(userid,dingjiid,pid){
        if (this.openid ===dingjiid){
          this.rlyinput?this.rlyinput=false:this.rlyinput=true;
        }
        this.commentUserMsg.forEach(item=>{
            if (item.id===dingjiid){
              if (item.userid===userid){
                this.openid=dingjiid;
                this.rlyTo.username=item.username;
                return false;
              }else{
                item.chirdren.forEach(it=>{
                  if (it.userid===userid){
                    this.rlyTo.username=it.username;
                    this.openid=dingjiid;
                    return false;
                  }
                });
              }
            }
        });
        this.rlyTo.id=pid;
        this.rlyTo.userid=userid;
      },
    }
  });
</script>
</body>
<style>
  .el-main{
    padding: 0;
    width:80%;
    margin:auto;
    height: 100%;
    margin-top: 10px;
  }
 body{
   height: 100%;
 }
 .el-divider{
   margin-left: 6%;
   width: 94%;
   margin-top: 20px;
   margin-bottom: 0;
 }
  .right-radio{
    margin: 5px;
  }
  .comment{
    padding-left: 30px;
    display: inline-block;
    width: 80%;
  }
  .reply-comment{
    display: inline-block;
    padding-left: 18%;
    width: 70%;
  }
  .main-left{
    display: inline-block;
    width: 79%;
    height: 100%;
    background-color: white;
    float: left;
  }
  .main-right{
    display: inline-block;
    width: 20%;
  }
  .video{
    position: relative;
    width: 100%;
    height: 99%;
  }
  .dminput{
    width: 500px;
  }
  .dmnums{
    margin: 0 50px;
    margin-right: 270px;
  }
 .sc-show{
   margin-top: 20px;
   background-color: white;
 }
 .sc-show>.el-button{
   margin-left: 50px;
 }
 .grades{
   display: inline-block;
   width: 200px;
 }
.marquee{
  font-size: 25px;
  color: #8cc5ff;
}

</style>
</html>